<template>
  <div>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item>机构编制管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div id="recruitSelect" :style="'height:'+tableHeight+'px'">
      <div v-if="copyDataFlag" style="text-align: end;">
        <el-button type="primary" :loading="btnLoading" @click="copyData()">从编制统计模块同步数据</el-button>
      </div>
      <el-row style="width:80%;margin:0 auto;">
        <el-col :span="6">
          <div class="selectItem" @click="goOrg()">
            <i class="select_icon staffingorgicon"></i>
            <span>机构编制信息</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="selectItem" @click="goFill()">
            <i class="select_icon staffingfillicon"></i>
            <span>填报管理</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="selectItem" @click="goSmz()">
            <i class="select_icon staffinganalyseicon"></i>
            <span>实名制统计分析</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="selectItem">
            <i class="select_icon staffingdataicon"></i>
            <span>数据对接</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableHeight: 100,
      copyDataFlag: false,
      btnLoading: false
    }
  },
  methods: {
    // 获取复制数据标识
    getCopyDataFlag () {
      this.$http
        .get(this.$http.defaults.headcountAPI + `api/sync/getCopyDataFlag`)
        .then(response => {
          if (response.data.success) {
            this.copyDataFlag = response.data.result
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    // 同步数据
    copyData () {
      this.$confirm('是否要同步数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.btnLoading = true
        this.$http
          .get(this.$http.defaults.headcountAPI + `api/sync/syncTables`)
          .then(response => {
            if (response.data.success) {
              this.btnLoading = false
              this.$message({
                message: '同步成功',
                type: 'success'
              })
            } else {
              this.$message({
                message: '获取失败:' + response.data.message,
                type: 'error'
              })
              this.btnLoading = false
            }
          })
          .catch(error => {
            this.$message({
              message: '网络获取失败:' + error,
              type: 'error'
            })
            this.btnLoading = false
          })
      })
    },
    goOrg () {
      this.$router.push({name: `staffingOrg`, query: {flag: 'Admin'}})
    },
    goFill () {
      this.$router.push({name: `staffingFill`})
    },
    goSmz () {
      this.$router.push({name: `zbbsmzMain`})
    },
    tableresize (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      let myheight = 165
      obj.$nextTick(function () {
        obj.tableHeight = clientHeight - myheight
      })
    }
  },
  mounted () {
    this.getCopyDataFlag()
    this.tableresize(this)
    window.onresize = () => {
      this.tableresize(this)
    }
  }
}
</script>
<style scoped>
#recruitSelect {
  -webkit-border-radius: 2px;
  border-radius: 2px;
  background-color: #f9f9f9;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  margin: 0 0 0 10px;
  padding:10px;
  width: calc(100% - 20px);
}
.selectItem{
  text-align: center;
  font-size:24px;
  font-weight: bolder;
  cursor: pointer;
  width: 200px;
  height: 250px;
  margin: 150px auto 0;
  color: #004DA0;
}
.select_icon{
  /* margin-bottom: 20px; */
  width: 200px;
  height: 200px;
  display: block;
  transform: scale(0.8);
}
.staffingorgicon{
  background: url(../assets/staffingorgicon.png) no-repeat top center;
}
.staffingfillicon{
  background: url(../assets/staffingfillicon.png) no-repeat top center;
}
.staffinganalyseicon{
  background: url(../assets/staffinganalyseicon.png) no-repeat top center;
}
.staffingdataicon{
  background: url(../assets/staffingdataicon.png) no-repeat top center;
}
</style>
